<template>
  <div class="container">
    <my-alert
      :title="title"
      :type="type"
      :effect="effect"
      :description="description"
      :showIcon="showIcon"
      :closable="closable"
      :center="center"
      :additionalParams="additionalParams"
      @close="close"
    > <p>这是自定义内容。</p></my-alert>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive } from "vue";
import MyAlert from "./alertTip.vue";
const object = reactive({
  title:'传过去的标题',
  type:'error',
  effect:'dark',
  description:'补充的提示',
  showIcon:true,
  closable:true,
  center:true
})
const title = ref("传过去的标题");
const type = ref("error");
const effect = ref("dark");
const description = ref("补充的提示");
const showIcon = ref(true);
const closable = ref(true);
const center = ref(true);
const additionalParams = ref('我是额外的参数')
const close = (val: string) => {
  console.log("准备关闭了", val);
};

</script>
<style lang="scss" scoped>
.container {
  margin: 100px 0px 0px 100px;
}
</style>
